
<template>
  <TableManager
    :columns="columns"
    :data="dataList"
    :pagination="pagination"
    :dialogFields="dialogFields"
    :searchFields="searchFields"
    @add="handleAdd"
    @edit="handleEdit"
    @delete="handleDelete"
    @page-change="handlePageChange"
    @search="handleSearch"
  />
</template>


<script setup>
import TableManager from '@/components/TableManager.vue'
import { ref, onMounted } from 'vue'
import { getUserList, addUser, updateUser, deleteUser } from '@/api/user'

// 表格列配置
const columns = [
  { prop: 'id', label: 'ID', width: 80 },
  { prop: 'username', label: '用户名' },
  { prop: 'email', label: '邮箱' },
  { prop: 'realName', label: '真实姓名' },
  { prop: 'enabled', label: '激活状态' }
]

// 表单字段配置
const dialogFields = [
  { prop: 'username', label: '用户名' },
  { prop: 'email', label: '邮箱' }
]

// 查询字段配置
const searchFields = [
  { prop: 'username', label: '用户名' }
]


// 数据列表 & 分页信息
const dataList = ref([])
const pagination = ref({ page: 1, pageSize: 10, total: 0 })

// 获取数据
async function loadData(searchParams = {}) {
  const { page, pageSize } = pagination.value
  const { records, total } = await getUserList(page, pageSize, searchParams)
  dataList.value = records
  pagination.value.total = total
}

// 查询
async function handleSearch(searchParams) {
  console.log('查询参数：', searchParams)
  pagination.value.page = 1
  await loadData(searchParams)
}

// 新增
async function handleAdd(row) {
  await addUser(row)
  loadData()
}

// 编辑
async function handleEdit(row) {
  await updateUser(row)
  loadData()
}

// 删除
async function handleDelete(row) {
  await deleteUser(row.id)
  loadData()
}

// 分页切换
function handlePageChange(page) {
  pagination.value.page = page
  loadData()
}

// 初始化
onMounted(() => {
  loadData()
})
</script>


